<template>
  <div class="serviceItem" :model="serviceInfo">
    <div>
      <el-image :src="baseUrl+serviceInfo.serviceImage" />
      <span>{{ serviceInfo.serviceName }}</span>
    </div>
  </div>

</template>

<script>
import { getInfoById } from '@/api/service'

export default {
  name: 'ServiceItem',
  props: {
    index: {
      type: Number,
      required: true
    },
    serviceId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      serviceInfo: {
        serviceId: '',
        serviceImage: '',
        serviceName: ''
      }
    }
  },
  created() {
    this.getServiceInfoById()
  },
  methods: {

    getData() {
      const vm = this
      return vm.serviceInfo
    },
    getServiceInfoById() {
      const vm = this
      getInfoById({ serviceId: this.serviceId }).then(response => {
        vm.serviceInfo.serviceName = response.data.data.serviceName
        vm.serviceInfo.serviceImage = JSON.parse(response.data.data.serviceImage)[0]
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
